<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="./assets/element/index.css">
  <link rel="stylesheet" href="./assets/common/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <order-header/>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <order-aside></order-aside>
      </el-aside>
      <el-main>
        <el-table
                :data="users"
                border
                style="width: 100%">
          <el-table-column
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
                  fixed
                  prop="id"
                  label="编号"
                  width="50">
          </el-table-column>
          <el-table-column
                  fixed
                  prop="account"
                  label="账户名"
                  width="150">
          </el-table-column>
          <el-table-column
                  prop="nikename"
                  label="昵称"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="districtId"
                  label="省份"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="详细地址"
                  width="300">
          </el-table-column>
          <el-table-column
                  prop="role"
                  label="角色"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="tel"
                  label="手机号"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="createId"
                  label="创建人"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="updateId"
                  label="修改人"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="160"
                  :formatter="getCreateTime"
          >
          </el-table-column>
          <el-table-column
                  prop="updateTime"
                  label="修改时间"
                  width="160"
                  :formatter="getUpdateTime"

          >
          </el-table-column>
          <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
            <template slot-scope="scope">
              <el-button @click="editUser(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
                title="编辑"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
          <el-form :model="tempuser" label-width="100px" class="demo-ruleForm">
            <el-form-item label="昵称" prop="nikename">
              <el-input v-model="tempuser.nikename"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="region">
              <el-input v-model="tempuser.districtId"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" required>
              <el-input v-model="tempuser.address"></el-input>
            </el-form-item>
            <el-form-item label="角色" required>
              <el-input v-model="tempuser.role"></el-input>
            </el-form-item>
            <el-form-item label="头像" required>
              <el-input v-model="tempuser.avatar"></el-input>
            </el-form-item>
            <el-form-item label="电话" required>
              <el-input v-model="tempuser.tel"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUser()">确 定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="./assets/element/vue.js"></script>
<script src="./assets/element/index.js"></script>
<script src="assets/jquery/jquery-2.1.1.min.js"></script>
<script src="assets/common/component.js"></script>
<script>
  new Vue({
    el:"#app",
    data(){
      return {
        users:[],
          dialogVisible:false,
          tempuser:'',

      }
    },
    mounted() {
      this.initUser();
    },
    methods:{
      getCreateTime(row,index) {
        return new Date(parseInt(row.createTime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      },
      getUpdateTime(row,index) {
        return new Date(parseInt(row.updateTime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      },

      initUser(){
        var that =this;
        $.ajax({
          url: '/user.do',
          dataType: 'json',
          type: 'get',
          success: function(data) {
            if (data.code == 200){
              that.users = data.data;
            }else {
              that.$message.error(data.msg);
            }

          },
          error:function(){
            that.$message.error("网络问题！！！！！！！");
          }
        })
      },
      deleteUser(row){
        var that =this;
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $.ajax({
            url: '/user.do?id='+row.id,
            dataType: 'json',
            type: 'delete',
            success: function(data) {
              if (data.code == 200){
                that.initUser();
              }
              that.$message.error(data.msg);

            },
            error:function(){
              that.$message.error("网络问题！！！！！！！");
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      editUser(row){
          this.tempuser = row;
          this.dialogVisible= true;
        },
      updateUser(){
        var that =this;
        $.ajax({
          url: '/user.do',
          dataType: 'json',
          data:that.tempuser,
          type: 'post',
          success: function(data) {
            if (data.code == 200){
              that.initUser();
              that.dialogVisible=false;
              that.$message.success(data.msg);

            }else {
              that.$message.error(data.msg);
              that.dialogVisible=false
            }

          },
          error:function(){
            that.$message.error("网络问题！！！！！！！");
            that.dialogVisible=false
          }
        })
      },
      handleClose(){
        this.dialogVisible=false
      }

    }
  })
</script>
<style>
  *{
    margin:0;
    padding: 0;
    border: 0;
  }
  .el-header {
    padding: 0 !important;
  }
</style>
</html>